<template>
  <div>
    <el-dialog title="新增" :model-value="addDialogVisible" @open="handleOpen" :before-close="handleCancel" width="30%">
      <el-form :model="formData" :rules="rules" label-width="100px" ref="addForm">
        <el-form-item label="父级:" prop="parentId">
          <el-tree-select v-model="formData.parentId" :data="formCfg.authorityTree" :render-after-expand="false"
                          :default-expand-all="true" :check-strictly="true" show-checkbox style="width: 240px" />
        </el-form-item>
        <el-form-item label="类型:" prop="type">
          <el-select v-model="formData.type">
            <el-option v-for="one in authorityTypeList" :key="one.id" :label="one.typeName" :value="one.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称:" prop="authorityName">
          <el-input v-model="formData.authorityName"></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="orderNo">
          <el-input-number v-model="formData.orderNo" :min="1" :step="1" :precision="0" />
        </el-form-item>
        <!-- 只有非按钮类型的权限才有 -->
        <el-form-item v-show="formData.type !== 1" label="路由路径:" prop="path">
          <el-input v-model="formData.path" placeholder="首尾不以/结尾的路由路径"></el-input>
        </el-form-item>
        <el-form-item label="后端请求:" prop="relateBackUriList">
          <el-select v-model="formData.relateBackUriList" :multiple="true" :filterable="true">
            <el-option v-for="one in formCfg.backUris" :key="one" :label="one" :value="one"></el-option>
          </el-select>
        </el-form-item>
        <!-- 只有非按钮类型的权限才有 -->
        <el-form-item v-show="formData.type !== 1" label="组件位置:" prop="componentPath">
          <el-input v-model="formData.componentPath" placeholder="如dept/DeptManage">
            <template v-slot:prepend>src/views/</template>
            <template v-slot:append>.vue</template>
          </el-input>
        </el-form-item>
        <!-- 只有非按钮类型的权限才有 -->
        <el-form-item v-show="formData.type !== 1" label="菜单:" prop="componentPath">
          <el-radio v-model="formData.showInMenu" :value="1">是</el-radio>
          <el-radio v-model="formData.showInMenu" :value="0">否</el-radio>
        </el-form-item>
        <!-- 只有需要显示在菜单中的权限才有 -->
        <el-form-item v-show="formData.type !== 1 && formData.showInMenu" label="图标名称:" prop="iconName">
          <el-input v-model="formData.icon"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name='AddAuthority' lang='ts'>
import { ref,reactive } from 'vue'
import { authorityTypeList } from '@/config/constants';
import { queryTreeApi,listBackUriApi, addApi } from '@/api/authorityApi';
import type { AnyObjsDefine } from '@/types/common';
import { ElMessage } from 'element-plus';
// 新增权限对应的字段
let formData = reactive({
  type: 0,
  authorityName: '',
  parentId: '-1',
  orderNo: 1,
  path: '',
  relateBackUriList: [],
  componentPath: '',
  showInMenu: 1,
  icon: '',
})
let formCfg = reactive({
  authorityTree:[] as AnyObjsDefine,
  backUris:[] as string[]
})
let rules = reactive({
  parentId: [
    { required: true, message: '请选择父级', trigger: 'blur' }
  ],
  authorityName: [
    { required: true, message: '请填写权限名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择权限类型', trigger: 'blur' }
  ],
  orderNo: [
    { required: true, message: '请填写排序', trigger: 'blur' }
  ]
})

let addForm = ref()
defineProps<{ addDialogVisible: boolean }>()
let emitter = defineEmits(["closeDialog","addSuccess"])
// 打开对话框事件
function handleOpen() {
  queryTreeApi().then(result => {
    formCfg.authorityTree = result.data
    formCfg.authorityTree.unshift({value:'-1',label:"无"})
  })
  // 后端uri
  listBackUriApi().then(result => {
    formCfg.backUris = result.data
  })
}
function handleCancel() {
  addForm.value.resetFields()
  emitter("closeDialog")
}
// 添加权限
function onSubmit(){
  addForm.value.validate((valid:boolean) => {
    if(!valid) return
    // 执行添加逻辑
    addApi(formData).then(result => {
      ElMessage({ type: "success", message: result.data })
      addForm.value.resetFields()
      emitter("addSuccess")
    })
  })
}
</script>
<style scoped></style>